<template>
    <div>
        <n-menu :options="menuOptions" />
    </div>
</template>

<script setup>
import { h } from "vue";
import { RouterLink } from "vue-router";
import { NIcon, NMenu } from "naive-ui";
import { Home, Search, Tools, Info } from "@vicons/fa";

function renderIcon (icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/"
          }
        },
        { default: () => "首页" }
      ),
    key: 'rootpage',
    icon: renderIcon(Home)
  },
    {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/searchingpage"
          }
        },
        { default: () => "搜索" }
      ),
    key: 'searchingpage',
    icon: renderIcon(Search)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/infopage"
          }
        },
        { default: () => "教程" }
      ),
    key: 'infopage',
    icon: renderIcon(Info)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/settingpage"
          }
        },
        { default: () => "设置" }
      ),
    key: 'settingpage',
    icon: renderIcon(Tools)
  }
]

</script>

<style scoped>

</style>